<template>
  <view v-if="visible" class="modal-overlay" @click="handleOverlayClick">
    <view class="modal-container" @click.stop>
      <!-- 模态框头部 -->
      <view class="modal-header">
        <view class="header-content">
          <view class="header-icon">📊</view>
          <view class="header-text">
            <text class="modal-title">导出项目验收报告</text>
            <text class="modal-subtitle">选择导出方式和参数</text>
          </view>
        </view>
        <view class="close-button" @click="closeModal">
          <text class="close-icon">✕</text>
        </view>
      </view>
      
      <!-- 模态框内容 -->
      <view class="modal-content">
        <!-- 导出方式选择 -->
        <view class="section">
          <view class="section-title">
            <text class="title-text">导出方式</text>
            <view class="title-line"></view>
          </view>
          <view class="export-options">
            <view 
              class="option-card" 
              :class="{ active: exportType === 'company' }"
              @click="selectExportType('company')"
            >
              <view class="option-icon">🏢</view>
              <view class="option-content">
                <text class="option-title">按公司导出</text>
                <text class="option-desc">导出指定公司的所有项目</text>
              </view>
              <view class="option-radio" :class="{ checked: exportType === 'company' }">
                <view class="radio-dot" v-if="exportType === 'company'"></view>
              </view>
            </view>
            
            <view 
              class="option-card" 
              :class="{ active: exportType === 'time_range' }"
              @click="selectExportType('time_range')"
            >
              <view class="option-icon">📅</view>
              <view class="option-content">
                <text class="option-title">按时间范围导出</text>
                <text class="option-desc">导出指定时间段内的项目</text>
              </view>
              <view class="option-radio" :class="{ checked: exportType === 'time_range' }">
                <view class="radio-dot" v-if="exportType === 'time_range'"></view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 按公司导出表单 -->
        <view v-if="exportType === 'company'" class="section">
          <view class="section-title">
            <text class="title-text">公司信息</text>
            <view class="title-line"></view>
          </view>
          <view class="form-group">
            <view class="input-wrapper">
              <view class="input-label">
                <text>公司名称</text>
                <text class="required">*</text>
              </view>
              <input 
                class="form-input" 
                v-model="companyName" 
                placeholder="请输入完整的公司名称"
                maxlength="100"
              />
              <view class="input-hint">
                <text>请输入准确的公司名称，支持模糊匹配</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 按时间范围导出表单 -->
        <view v-if="exportType === 'time_range'" class="section">
          <view class="section-title">
            <text class="title-text">时间范围</text>
            <view class="title-line"></view>
          </view>
          
          <!-- 快捷时间选择 -->
          <view class="quick-time-section">
            <text class="quick-time-label">快捷选择</text>
            <view class="quick-time-buttons">
              <button 
                class="quick-btn" 
                :class="{ active: selectedQuick === 'thisMonth' }"
                @click="setQuickDate('thisMonth')"
              >
                本月
              </button>
              <button 
                class="quick-btn" 
                :class="{ active: selectedQuick === 'lastMonth' }"
                @click="setQuickDate('lastMonth')"
              >
                上月
              </button>
              <button 
                class="quick-btn" 
                :class="{ active: selectedQuick === 'thisQuarter' }"
                @click="setQuickDate('thisQuarter')"
              >
                本季度
              </button>
              <button 
                class="quick-btn" 
                :class="{ active: selectedQuick === 'thisYear' }"
                @click="setQuickDate('thisYear')"
              >
                今年
              </button>
            </view>
          </view>
          
          <!-- 自定义时间选择 -->
          <view class="date-range-section">
            <view class="date-inputs">
              <view class="date-input-group">
                <text class="date-label">开始时间 *</text>
                <picker 
                  mode="date" 
                  :value="startDate" 
                  @change="onStartDateChange"
                  :end="endDate"
                >
                  <view class="date-picker" :class="{ filled: startDate }">
                    <text class="date-text">{{ startDate || '选择开始时间' }}</text>
                    <text class="date-icon">📅</text>
                  </view>
                </picker>
              </view>
              
              <view class="date-separator">
                <text>至</text>
              </view>
              
              <view class="date-input-group">
                <text class="date-label">结束时间 *</text>
                <picker 
                  mode="date" 
                  :value="endDate" 
                  @change="onEndDateChange"
                  :start="startDate"
                >
                  <view class="date-picker" :class="{ filled: endDate }">
                    <text class="date-text">{{ endDate || '选择结束时间' }}</text>
                    <text class="date-icon">📅</text>
                  </view>
                </picker>
              </view>
            </view>
            
            <view v-if="dateRangeInfo" class="date-info">
              <text>{{ dateRangeInfo }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 模态框底部 -->
      <view class="modal-footer">
        <button class="footer-btn cancel-btn" @click="closeModal" :disabled="isExporting">
          取消
        </button>
        <button 
          class="footer-btn confirm-btn" 
          @click="confirmExport" 
          :disabled="!canExport || isExporting"
          :class="{ loading: isExporting }"
        >
          <view v-if="isExporting" class="loading-spinner"></view>
          <text>{{ isExporting ? '导出中...' : '确认导出' }}</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ExportReportModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      exportType: 'company',
      companyName: '',
      startDate: '',
      endDate: '',
      selectedQuick: '',
      isExporting: false
    }
  },
  computed: {
    canExport() {
      if (this.isExporting) return false;
      
      if (this.exportType === 'company') {
        return this.companyName.trim().length > 0;
      } else if (this.exportType === 'time_range') {
        return this.startDate && this.endDate;
      }
      
      return false;
    },
    
    dateRangeInfo() {
      if (this.startDate && this.endDate) {
        const start = new Date(this.startDate);
        const end = new Date(this.endDate);
        const diffTime = Math.abs(end - start);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
        return `共 ${diffDays} 天`;
      }
      return '';
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.resetForm();
      }
    }
  },
  methods: {
    // 重置表单
    resetForm() {
      this.exportType = 'company';
      this.companyName = '';
      this.startDate = '';
      this.endDate = '';
      this.selectedQuick = '';
      this.isExporting = false;
    },
    
    // 选择导出类型
    selectExportType(type) {
      this.exportType = type;
      this.selectedQuick = '';
    },
    
    // 处理遮罩层点击
    handleOverlayClick() {
      if (!this.isExporting) {
        this.closeModal();
      }
    },
    
    // 关闭模态框
    closeModal() {
      if (!this.isExporting) {
        this.$emit('close');
      }
    },
    
    // 开始时间变化
    onStartDateChange(e) {
      this.startDate = e.detail.value;
      this.selectedQuick = '';
    },
    
    // 结束时间变化
    onEndDateChange(e) {
      this.endDate = e.detail.value;
      this.selectedQuick = '';
    },
    
    // 设置快捷日期
    setQuickDate(type) {
      this.selectedQuick = type;
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth();
      
      switch (type) {
        case 'thisMonth':
          this.startDate = `${year}-${(month + 1).toString().padStart(2, '0')}-01`;
          this.endDate = this.formatDate(new Date(year, month + 1, 0));
          break;
          
        case 'lastMonth':
          const lastMonth = month === 0 ? 11 : month - 1;
          const lastMonthYear = month === 0 ? year - 1 : year;
          this.startDate = `${lastMonthYear}-${(lastMonth + 1).toString().padStart(2, '0')}-01`;
          this.endDate = this.formatDate(new Date(lastMonthYear, lastMonth + 1, 0));
          break;
          
        case 'thisQuarter':
          const quarterStart = Math.floor(month / 3) * 3;
          this.startDate = `${year}-${(quarterStart + 1).toString().padStart(2, '0')}-01`;
          this.endDate = this.formatDate(new Date(year, quarterStart + 3, 0));
          break;
          
        case 'thisYear':
          this.startDate = `${year}-01-01`;
          this.endDate = `${year}-12-31`;
          break;
      }
    },
    
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 确认导出
    async confirmExport() {
      if (!this.canExport) return;
      
      this.isExporting = true;
      
      try {
        let exportParams = {
          query_type: this.exportType
        };
        
        if (this.exportType === 'company') {
          exportParams.select_comp = this.companyName.trim();
        } else if (this.exportType === 'time_range') {
          exportParams.starttime = this.startDate;
          exportParams.endtime = this.endDate;
        }
        
        // 触发导出事件
        this.$emit('export', exportParams);
        
        // 延迟关闭模态框，让用户看到导出状态
        setTimeout(() => {
          this.closeModal();
        }, 500);
        
      } catch (error) {
        console.error('导出参数处理失败:', error);
        uni.showToast({
          title: '参数错误',
          icon: 'none'
        });
      } finally {
        setTimeout(() => {
          this.isExporting = false;
        }, 1000);
      }
    }
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

.modal-container {
  background: white;
  border-radius: 20rpx;
  width: 90%;
  max-width: 700rpx;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
}

/* 头部样式 */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx;
  background: #007aff;
  color: white;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.header-icon {
  font-size: 48rpx;
  width: 80rpx;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-text {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
}

.modal-subtitle {
  font-size: 26rpx;
  opacity: 0.9;
}

.close-button {
  width: 60rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.close-button:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.95);
}

.close-icon {
  font-size: 32rpx;
  font-weight: bold;
}

/* 内容样式 */
.modal-content {
  padding: 40rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.section {
  margin-bottom: 50rpx;
}

.section:last-child {
  margin-bottom: 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.title-line {
  flex: 1;
  height: 2rpx;
  background: linear-gradient(to right, #007aff, transparent);
}

/* 导出选项样式 */
.export-options {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.option-card {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 16rpx;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
}

.option-card.active {
  border-color: #007aff;
  background: rgba(0, 122, 255, 0.05);
  box-shadow: 0 8rpx 25rpx rgba(0, 122, 255, 0.15);
}

.option-icon {
  font-size: 40rpx;
  width: 80rpx;
  height: 80rpx;
  background: #f8f9fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.option-card.active .option-icon {
  background: #007aff;
}

.option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.option-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.option-desc {
  font-size: 26rpx;
  color: #666;
}

.option-radio {
  width: 40rpx;
  height: 40rpx;
  border: 3rpx solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.option-radio.checked {
  border-color: #007aff;
}

.radio-dot {
  width: 20rpx;
  height: 20rpx;
  background: #007aff;
  border-radius: 50%;
}

/* 表单样式 */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.input-label {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.required {
  color: #ff4757;
  font-weight: bold;
}

.form-input {
  padding: 25rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 28rpx;
  background: white;
  transition: all 0.2s;
}

.form-input:focus {
  border-color: #007aff;
  box-shadow: 0 0 0 6rpx rgba(0, 122, 255, 0.1);
  outline: none;
}

.input-hint {
  font-size: 24rpx;
  color: #999;
  margin-top: -10rpx;
}

/* 快捷时间选择样式 */
.quick-time-section {
  margin-bottom: 30rpx;
}

.quick-time-label {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}

.quick-time-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.quick-btn {
  padding: 15rpx 25rpx;
  background: #f8f9fa;
  border: 2rpx solid #e0e0e0;
  border-radius: 20rpx;
  font-size: 26rpx;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
}

.quick-btn.active {
  background: #007aff;
  border-color: #007aff;
  color: white;
  box-shadow: 0 4rpx 15rpx rgba(0, 122, 255, 0.3);
}

.quick-btn:active {
  transform: scale(0.95);
}

/* 日期选择样式 */
.date-range-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.date-inputs {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.date-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.date-label {
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
}

.date-picker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.date-picker.filled {
  border-color: #007aff;
  background: rgba(0, 122, 255, 0.02);
}

.date-text {
  font-size: 28rpx;
  color: #333;
}

.date-picker:not(.filled) .date-text {
  color: #999;
}

.date-icon {
  font-size: 28rpx;
  color: #999;
}

.date-separator {
  margin-top: 35rpx;
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
}

.date-info {
  text-align: center;
  font-size: 24rpx;
  color: #007aff;
  background: rgba(0, 122, 255, 0.05);
  padding: 15rpx;
  border-radius: 8rpx;
}

/* 底部样式 */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  padding: 40rpx;
  border-top: 1rpx solid #f0f0f0;
  background: #fafafa;
}

.footer-btn {
  padding: 25rpx 50rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10rpx;
  min-width: 140rpx;
  justify-content: center;
}

.cancel-btn {
  background: #f8f9fa;
  color: #666;
  border: 2rpx solid #e0e0e0;
}

.cancel-btn:active:not(:disabled) {
  background: #e9ecef;
}

.confirm-btn {
  background: #007aff;
  color: white;
  box-shadow: 0 8rpx 25rpx rgba(0, 122, 255, 0.3);
}

.confirm-btn:active:not(:disabled) {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 15rpx rgba(0, 122, 255, 0.3);
}

.confirm-btn:disabled {
  background: #ccc;
  box-shadow: none;
  cursor: not-allowed;
}

.confirm-btn.loading {
  cursor: not-allowed;
}

/* 加载动画 */
.loading-spinner {
  width: 24rpx;
  height: 24rpx;
  border: 3rpx solid rgba(255, 255, 255, 0.3);
  border-top: 3rpx solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 动画定义 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .date-inputs {
    flex-direction: column;
    align-items: stretch;
  }
  
  .date-separator {
    margin: 0;
    text-align: center;
  }
  
  .quick-time-buttons {
    justify-content: center;
  }
  
  .modal-footer {
    flex-direction: column;
  }
  
  .footer-btn {
    width: 100%;
  }
}
</style>